<template>
	<view>
		<view class="search-nav">
			<view><uni-search-bar placeholder="搜索内容" radius="8" bgColor="#FFFFFF" @confirm="onSearch" @clear="onCancel" cancelButton="none" @input="onInput" /></view>
			<view class="p10-0">
				<text class="searchBtn" @click="onSearchBtn">搜索</text>
			</view>
		</view>
		<uni-row>
			<uni-col v-for="item in dataInfo" :key='item.id' :span="12" >
				<view class="p8 mt10" @click="onLink('/pages/product/info/info',item.id)">
					<image style="width: 100%;border-radius: 3px;" :src="item.banner" mode="widthFix"></image>
				</view>
				<view class="p0-8 title">{{item.title}}</view>
			</uni-col>
		</uni-row>
		<view class="cart"><image @click="onLink('/pages/cart/cart',0)" src="https://xinzhu-1301398555.cos.ap-shanghai.myqcloud.com/wxapp/cart_item.png" mode="widthFix"></image></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{},
				dataInfo:[]
			}
		},
		onShow() {
			this.onGetData()
		},
		methods: {
			onGetData(){
				let _this = this
				this.$request_api('applet_api/product','POST',this.form).then(res => {
					_this.dataInfo = res.data
				}).catch(err => {
					console.log(err)
				})
			},
			onSearch(e){
				this.form.search = e.value
				this.form.page = 1
				this.onGetData()
			},
			onInput(e){
				this.form.search = e
			},
			onSearchBtn(){
				this.form.page = 1
				this.onGetData()
			},
			onCancel(e){
				this.form.search = ''
				this.form.page = 1
				this.onGetData()
			},
			onLink(url,id){
				console.log(url)
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped >
.content{width: 100%;}
.container {overflow: hidden;}
.title{height: 50px;font-size: 1.1rem;font-weight: 500;margin-top: 5px;}
</style>
